<template>
   <div class="activitylist" style="">
        <wxc-minibar title="活动中心">
            <!-- <div class="header-con" slot="middle">
                <text class="header-title">活动中心</text>
            </div> -->
      </wxc-minibar>

       <scroller class="scroller" style="position:fixed;top:100px;bottom:0;left:0px;right:0px;background-color:rgb(245,245,245)">
       <div class="activitylistbox">
            <div class="activity_item" v-for="(item,index) in activitylist1" :key="index">
                    <image style="height:304px;" :src="item.val6 || 'https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/activityMo.png'"></image>
                    <div class="activity_detail">
                        <div class="activity_title">
                            <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #333333;">{{item.val2}}</text>
                        </div>
                        <div class="activity_time">
                            <text style="font-size: 24px;color: #999999;">{{item.timeStart | filtertime}}</text>
                            <text style="font-size: 24px;color: #999999;margin-left:10px;margin-right:10px;">至</text>
                            <text style="font-size: 24px;color: #999999;">{{item.timeEnd | filtertime }}</text>
                        </div>
                    </div>
                    <div class="activity_mask" v-if="item.status===0">
                        <image class="alreadyend" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/alreadyend.png"></image>
                    </div>
            </div>
            
        </div>
        </scroller>
   </div>
</template>

<script>
import { GetResponsesToken } from '@/api.js'
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
export default {
    data(){
        return {
            activitylist:[
                {
                   title: '邀请好友，一起来赚钱！',
                   status:1, // 活动进行中
                   imgurl: 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/activity1.png',
                   starttime:'2018-10-01',
                   endtime: '2019-10-01'
                    
                },
                {
                   title: '购彩赚积分，积分兑好物！',
                   status:0, // 活动已结束
                   imgurl: 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/activity2.png',
                   starttime:'2018-10-01',
                   endtime: '2019-10-01'
                },
                {
                   title: '购彩赚积分，积分兑好物！',
                   status:0, // 活动已结束
                   imgurl: 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/activity2.png',
                   starttime:'2018-10-01',
                   endtime: '2019-10-01'
                }
            ],
            activitylist1:[]
        }
    },
    filters: {
       filtertime(time) {
            let date = new Date(+time)
            
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

            return `${ date.getFullYear() }-${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())}`
        }
    },

    created () {
        this.selectFn()
    },

    components:{
        WxcMinibar
    },

    methods: {
        router(){
            this.$router.push({
                path: '/',
                query:{
                    index:2
                }
            })
        },

        async selectFn() {
            // GetResponsesToken
            // let data = await GetResponsesToken('account/sysparam/select')
            let data=await  GetResponsesToken('account/sysparam/sysParamType/ACTIVITY');
            if( data.code === 0) {
                this.activitylist1 = data.data
            } else {
                modal.toast({message: error})
            }
        }
    }
};
</script>
<style scoped>
   .scroller {
      width: 750px;
   }
   .activitylist{
      background-color: rgb(245,245,245);
    }
    .activitylistbox{
      padding-left: 32px;
      padding-right: 32px;
      padding-top: 32px;
      background-color: rgb(245,245,245);
    }
    .activity_detail{
        height: 112px;
        padding-top: 20px;
        padding-left: 15px;
    }
    .activity_item{
        position: relative;
        height: 416px;
        background-color: white;
        margin-bottom: 32px;
        border-radius: 12px;
        overflow: hidden;
    }
    .activity_mask{
        position: absolute;
        height: 416px;
        right: 0;
        bottom: 0;
        top: 0;
        left: 0;
        opacity: 0.6;
        background-color: #FFFFFF;
        border-radius: 12px;
    }
    .alreadyend{
        position: absolute;
        right: 39px;
        bottom: 41px;
        width: 112px;
        height: 112px;
    }
    .activity_time{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 20px;
    }
    .scroller {
        background-color: white;
    }
    .header-con {
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        flex-direction: row;
    }
    .header-title {
        font-size: 34px;
        color: #fff;
        font-weight: 600;
        font-family: PingFangSC-Medium;
    }


</style>